const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    // 配置为开发模式，webpack会使用内置优化，更易于调试
    mode: 'development',
    // 这个配置值意为保证运行时行数与源代码行数保持一致
    devtool: 'cheap-module-source-map',
    // 配置打包入口JS文件
    entry: './src/main.js',
    // 配置输出目录
    output: {
        // 配置打包后输出目录
        path: path.resolve(__dirname, 'dist'),
        // 配置输出文件名
        filename: 'bundle.js'
    },
    plugins: [new HtmlWebpackPlugin({
        // 配置html文件的打包入口
        template: './public/index.html'
    })],
    // 配置loader(加载器)，加强webpack对文件的解析能力
    module: {
        rules: [
            {
                // 匹配所有的css文件
                test: /\.css$/,
                // 使用style-loader,css-loader将css文件解析并打包，然后将样式插入DOM中
                // use数组中的元素由右向左执行，所有的css文件都会被打包到js中去
                use: ['style-loader', 'css-loader']
            },
            {
                // 同上
                test: /\.less$/,
                use: ['style-loader', 'css-loader', 'less-loader']
            },
            {
                // 匹配常见的图片格式
                test: /\.(png|jpg|gif|jpeg)$/i,

                use: [
                    // {
                    //     loader: 'file-loader'
                    // },
                    {
                        loader: 'url-loader',
                        options: {
                            // 超过8kb的图片文件将不转换，使用file-loader直接输出图片文件
                            limit: 8 * 1024
                        }
                    }
                ]
            },
            {
                // 处理字体图标的解析
                test: /\.(eot|svg|ttf|woff|woff2)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 2 * 1024,
                            // 配置输出的文件名
                            name: '[name].[ext]',
                            // 配置输出的文件目录
                            outputPath: "fonts/"
                        }
                    }
                ]
            }
        ]
    },
    devServer: {
        // 配置服务器的端口号
        port: 3000,
        // 自动打开浏览器
        open: true
    }
}